<template>
  <!-- #ifndef APP-NVUE -->
  <view class="uni-list uni-border-top-bottom">
    <view v-if="border" class="uni-list--border-top"></view>
    <slot />
    <view v-if="border" class="uni-list--border-bottom"></view>
  </view>
  <!-- #endif -->
  <!-- #ifdef APP-NVUE -->
  <list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15">
    <slot />
  </list>
  <!-- #endif -->
</template>

<script>
  /**
   * List 列表
   * @description 列表组件
   * @tutorial https://ext.dcloud.net.cn/plugin?id=24
   * @property {String} 	border = [true|false] 		标题
   */
  export default {
    name: 'uniList',
    'mp-weixin': {
      options: {
        multipleSlots: false
      }
    },
    props: {
      enableBackToTop: {
        type: [Boolean, String],
        default: false
      },
      scrollY: {
        type: [Boolean, String],
        default: false
      },
      border: {
        type: Boolean,
        default: true
      }
    },
    // provide() {
    // 	return {
    // 		list: this
    // 	};
    // },
    created() {
      this.firstChildAppend = false;
    },
    methods: {
      loadMore(e) {
        this.$emit('scrolltolower');
      }
    }
  };
</script>
<style lang="scss">
  $uni-bg-color:#ffffff;
  $uni-border-color:#e5e5e5;

  .uni-list {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    background-color: $uni-bg-color;
    position: relative;
    flex-direction: column;
  }

  .uni-list--border {
    position: relative;
    /* #ifdef APP-NVUE */
    border-top-color: $uni-border-color;
    border-top-style: solid;
    border-top-width: 0.5px;
    border-bottom-color: $uni-border-color;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    /* #endif */
    z-index: -1;
  }

  /* #ifndef APP-NVUE */

  .uni-list--border-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
    z-index: 1;
  }

  .uni-list--border-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 1px;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
  }

  /* #endif */
</style>
